// 首页
import React, { useEffect, useRef, useState } from 'react'
import { paintBoard } from '@/core/paintBoard'
// import { request } from '@/utils/request'

import ToolPanel from '@/components/toolPanel'
import GuideInfo from '@/components/guideInfo'
import CleanModal from '@/components/cleanModal'
import BoardOperation from '@/components/boardOperation'
import DeleteFileModal from '@/components/boardOperation/deleteFileModal'
import ControlPanel from '@/pages/control-panel'

const Board: React.FC = () => {
  const canvasEl = useRef<HTMLCanvasElement>(null)
  const [canvasLoaded, setCanvasLoaded] = useState(false)
  const [mockData, setMockData] = useState<string>('')

  useEffect(() => {
    if (canvasEl.current) {
      paintBoard
        .initCanvas(canvasEl.current as HTMLCanvasElement)
        .then((loaded) => {
          setCanvasLoaded(loaded)
        })
      // 拖拽图片到画布
      const handleDrop = (e: DragEvent) => {
        e.preventDefault();
        const url = e.dataTransfer?.getData('image/png') || e.dataTransfer?.getData('text/plain');
        if (url) {
          // 动态引入 ImageElement，避免循环依赖
          import('@/core/element/image').then(({ ImageElement }) => {
            const image = new ImageElement();
            image.addImage(url);
          });
        }
      };
      const canvasDom = canvasEl.current;
      canvasDom.addEventListener('drop', handleDrop);
      canvasDom.addEventListener('dragover', (e) => e.preventDefault());
      // 清理事件
      return () => {
        canvasDom.removeEventListener('drop', handleDrop);
        canvasDom.removeEventListener('dragover', (e) => e.preventDefault());
        paintBoard.removeCanvas();
      };
    }
  }, [])

  return (
    <div>
      <div className="w-screen h-screen flex justify-center items-center bg-slate-100">
        <canvas className="w-full h-full block" ref={canvasEl}></canvas>
      </div>
      {canvasLoaded && (
        <>
          <ToolPanel />
          {/* <GuideInfo /> */}
          <CleanModal />
          <DeleteFileModal />
          <BoardOperation />
          <ControlPanel />
        </>
      )}
    </div>
  )
}

export default Board
